<template>
  <div>
    <h1>
      情况四：watch监视【ref】或【reactive】定义的【对象类型】数据中的某个属性
    </h1>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <p>第一台车：{{ person.car.c1 }}</p>
    <p>第二台车：{{ person.car.c2 }}</p>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整车</button>
  </div>
</template>

<script setup>
import { reactive, watch } from "vue";

let person = reactive({
  name: "小王",
  age: 20,
  car: {
    c1: "兰博基尼",
    c2: "法拉利",
  },
});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changeC1() {
  person.car.c1 = "保时捷";
}
function changeC2() {
  person.car.c2 = "奥迪";
}
function changeCar() {
  person.car = { c1: "大众", c2: "捷达" }; //person.car修改reactive内部的属性可以直接整体修改，但是reactive定义的对象不可以整体修改，只能修改属性
}
//watch第一参数监视：函数返回一个值（getter函数）
//监视响应式对象中的某个属性，且该属性是基本类型，要写成函数式
watch(
  () => person.name, //() => person.name包含了函数就是监视【地址值】了
  (newValue, oldValue) => {
    console.log("person.name属性发生了变化", newValue, oldValue);
  }
);
//监视的要是引用类型的对象里的属性，最好写函数式；
//注意点：若是对象，监视的是地址值，需要关注对象内部的属性，需要手动开启深度监视deep:true
watch(
  () => person.car,
  (newValue, oldValue) => {
    console.log("person.car属性发生了变化", newValue, oldValue);
  },
  { deep: true }
);
</script>

<style scoped></style>
